<template>
    <div ref="mescroll" class="mescroll">
        <div>
            <slot></slot>
        </div>
    </div>
</template>

<script>
    // 引入mescroll.min.js和mescroll.min.css
    import MeScroll from 'mescroll.js'
    import 'mescroll.js/mescroll.min.css'

    export default {
        name: 'MeScroll',
        data: function () {
            return {
                mescroll: null,
                lastScrollTop: 0, // 路由切换时滚动条的位置
                lastBounce: null // 路由切换时是否禁止ios回弹
            }
        },
        props: {
            up: Object,
            down: Object
        },
        mounted: function () {
            this.mescroll = new this.initMeScroll(this.$refs.mescroll, {
                up: this.up,
                down: this.down
            });
            this.$emit('init', this.mescroll) // init回调mescroll对象
        },
        methods: {
            initMeScroll(mescrollId, options) {
                //下拉刷新的布局内容
                let htmlContent = '<p class="downwarp-tip">↓ 下拉刷新 ↓</p>';
                htmlContent += '<img class="downwarp-progress" src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/refresh/mescroll-progress.png"/>';
                htmlContent += '<img class="downwarp-slogan" src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/refresh/mescroll-slogan.png"/>';
                //自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除)
                let myOption = {
                    down: {
                        htmlContent: htmlContent, //布局内容
                        inOffset: function (mescroll) {
                            //进入指定距离范围内那一刻的回调
                            mescroll.downTipDom.innerHTML = "↓ 下拉刷新 ↓";
                            mescroll.downProgressDom.classList.remove("mescroll-rotate");
                        },
                        outOffset: function (mescroll) {
                            //下拉超过指定距离那一刻的回调
                            mescroll.downTipDom.innerHTML = "↑ 释放更新 ↑";
                        },
                        auto: false,
                        inOffsetRate: 0.6,//在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                    },
                    up: {
                        auto: false,
                        toTop: {
                            src: "https://suhoo.oss-cn-shenzhen.aliyuncs.com/refresh/mescroll-totop.png" //回到顶部按钮的图片路径
                        }
                    }
                };
                //加入自定义的默认配置
                options = MeScroll.extend(options, myOption);
                //创建MeScroll对象
                return new MeScroll(mescrollId, options);
            },
            beforeRouteEnter() {
                if (this.mescroll) {
                    // 滚动到之前列表的位置
                    if (this.lastScrollTop) {
                        this.mescroll.setScrollTop(this.lastScrollTop);
                        setTimeout(() => { // 需延时,因为setScrollTop内部会触发onScroll,可能会渐显回到顶部按钮
                            this.mescroll.setTopBtnFadeDuration(0); // 设置回到顶部按钮显示时无渐显动画
                        }, 16)
                    }
                    // 恢复到之前设置的isBounce状态
                    if (this.lastBounce != null) this.mescroll.setBounce(this.lastBounce);
                }
            },
            beforeRouteLeave() {
                if (this.mescroll) {
                    this.lastScrollTop = this.mescroll.getScrollTop(); // 记录当前滚动条的位置
                    this.mescroll.hideTopBtn(0); // 隐藏回到顶部按钮,无渐隐动画
                    this.lastBounce = this.mescroll.optUp.isBounce; // 记录当前是否禁止ios回弹
                    this.mescroll.setBounce(true); // 允许bounce
                }
            }
        }
    }
</script>
<style>
    /*下拉刷新--提示文本*/
    .mescroll-downwarp .downwarp-tip {
        display: block;
        margin-bottom: 6px;
    }

    /*下拉刷新,上拉加载--标语图片*/
    .mescroll-downwarp .downwarp-slogan {
        width: auto;
        height: 28px;
        vertical-align: middle;
    }

    /*下拉刷新,上拉加载--旋转进度条*/
    .mescroll-downwarp .downwarp-progress {
        width: 30px;
        height: 30px;
        border: none;
        margin: auto;
    }
</style>
